﻿
@{
    ViewData["Title"] = "ForgetPasswordView";
    Layout = null;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>邮箱验证找回密码</title>
    <link href="../link.css" rel="stylesheet">
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="../layer/skin/layer.css" rel="stylesheet">
</head>
<body>
    <div style="height:100%;">
        <div class="rebinding-box">
            <div class="box-title">
                <h2 class="mtb5">找回密码</h2>
                <i>为了保障您的帐户安全，请谨慎填写</i>
            </div>
            <div class="box-timeline">
                <ul class="text-center" style="width: 1000px;">
                    <li>
                        输入账号
                        <div class="box-num1">
                            1
                        </div>
                    </li>
                    <li class="ml45">
                        邮箱验证
                        <div class="box-outside1 outside1ab" id="outside1abs">
                            <div class="box-num2 num2ab">
                                2 
                          </div>
                        </div>
                    </li>
                    <li class="ml45">
                        填写新密码
                        <div class="box-outside2 outside2ab" id="outside2as">
                            <div class="box-num3 num3ab">
                                3
                            </div>
                        </div>
                    </li>
                    <li class="ml45">
                        完成
                        <div class="box-outside3 outside3a" id="outside3as">
                            <div class="box-num4 num4a">
                                4
                            </div>
                        </div>
                    </li>
                </ul>


            </div>
            <!--第一步-->
            <div class="onebox-form" id="oneform">
                <div class="oneform">
                    <div class="oneform-box">
                        <label class="oneform-label">登录账号</label>
                        <div class="oneform-input">
                            <input id="userName" autocomplete="off" placeholder="请填写要找回密码的帐号">
                        </div>
                    </div>
                    <div class="onebtn-box">
                        <button class="onebtn" id="onebtn" onclick="fun()">下一步</button>
                    </div>
                </div>
            </div>
            <!--第二步-->
            <div class="twobox-form" id="twoform">
                <div class="twoform">
                    <div class="twoform-box">
                        <div class="newtel">
                            <label class="twoform-label">邮箱</label>
                            <div class="twoform-input">
                                <input type="text" id="email"  placeholder="请输入邮箱地址">
                            </div>
                        </div>
                        <div class="validatecode">
                            <label class="twoform-label2">验证码</label>
                            <div class="twoform-input2">
                                <input type="text" autocomplete="off" id="rndNum" placeholder="请输入验证码">

                            </div>
                            <button class="sendcode"   id="sendRndnum">发送验证码</button>
                            <div class="sendtimer">
                                &nbsp;&nbsp;&nbsp;(<span id="timer1"></span>)s后可重新获取
                            </div>
                        </div>
                    </div>
                </div>
                <div class="twobtn-box">
                    <button class="twobtn" id="twobtn" onclick="fun1()">下一步</button>
                </div>
            </div>
            <!--第三步-->
            <div class="threebox-form twobox-form" id="threeform">
                <div class="threeform">
                    <div class="threeform-box">
                        <div class="newtel">
                            <label class="threeform-label">新密码</label>
                            <div class="threeform-input3">
                                <input type="password" id="pwd" autocomplete="off" placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="validatecode">
                            <label class="threeform-label3">确认密码</label>
                            <div class="threeform-input3">
                                <input type="password" autocomplete="off" id="repwd" placeholder="请确认输入密码">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="threebtn-box">
                    <button class="threebtn" id="threebtn" onclick="fun2()">下一步</button>
                </div>
            </div>
            <!--第四步-->
            <div class="fourbox-form" id="fourform">
                <div class="successr">
                    <div class="symbol">

                    </div>
                    <p>恭喜您，修改密码成功！</p>
                    <br/>
                    <a href="/Login/Index" class="layui-btn layui-btn-normal">返回</a>
                </div>
            </div>
        </div>
    </div>

    <script src="../Scripts/jquery-3.4.1.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../layer/layer.js"></script>
    <script>
    var onebtns = document.getElementById("onebtn");
    var twobtns = document.getElementById("twobtn");
    var soutside1ab = document.getElementById("outside1abs");
    var soutside2as = document.getElementById("outside2as");
    var soutside3as = document.getElementById("outside3as");
    var oneforms = document.getElementById("oneform");
    var twoforms = document.getElementById("twoform");
    var threeforms = document.getElementById("threeform");
    var fourforms = document.getElementById("fourform");

    var timer1 = 60;

    //倒计时
    function TimeDown() {
        $("#timer1").html(timer1);

        if (timer1 > 0) {
            setTimeout(function () { TimeDown(); }, 1000);
        } else if (timer1 <= 0) {
            timer1 = 61;
            $("#sendRndnum").css("display", "block");
            $(".sendtimer").css("display", "none");
        }
        --timer1;
    };

    //发送邮件
    $("#sendRndnum").click(function () {
        var userName = $("#userName").val();
        var email = $("#email").val();

        if (email == "" || email == null) {
            layer.msg("未绑定邮箱");
            return false;
        }
        var regular = /^[a-zA-Z0-9_-]+@@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; //正则
        if (!regular.test(email)) {
            layer.msg("邮箱格式不正确");
            return false;
        }
        $.get("/Login/GetSendMail?box=" + email,function() {
        });
        $("#sendRndnum").css("display", "none");
        $(".sendtimer").css("display", "block");

        TimeDown();

    });
    //验证账号
    function fun() {
        var userName = $("#userName").val();
        if (userName == "") {
            layer.msg("请输入要找回密码的账户");
            return false;
        }
        var regular = /^[A-Za-z0-9]{4,20}$/; //正则
        if (!regular.test(userName)) {
            layer.msg("禁止输入特殊字符,账号格式为4-20位英文和数字");
            return false;
        }
        $.get("/Login/PostVerifyWhetherTheAccountExists?accountNumber=" + userName,
            function(res) {
                if (res > 0) {
                    soutside1ab.classList.remove("outside1ab");
                    oneforms.style.display = "none";
                    twoforms.style.display = "block";
                } else {
                    layer.msg("账号不存在,请联系管理员!");
                }
            });
    }

   

    //验证邮箱验证码
    function fun1() {
        var rndNum = $("#rndNum").val();

        if (rndNum == "") {
            layer.msg("请输入验证码");
            return false;
        }
        $.get("/Login/Verification?code="+rndNum,
            function(res) {
                if (res > 0) {
                    threeforms.style.display = "block";
                    twoforms.style.display = "none";
                    soutside2as.classList.remove("outside2ab");
                } else {
                    layer.msg("验证码输入错误!");
                }
            });


    }
    //修改密码
    function fun2() {
        var userName = $("#userName").val();
        var pwd= $("#pwd").val();
        var repwd = $("#repwd").val();
        if (pwd != repwd) {
            layer.msg("2次密码不一致", { icon: 5 });
            return false;
        }
        var regular = /^[A-Za-z0-9]{4,20}$/; //正则
        if (!regular.test(pwd)) {
            layer.msg("禁止输入特殊字符,账号格式为4-20位英文和数字");
            return false;
        }
        if (!regular.test(repwd)) {
            layer.msg("禁止输入特殊字符,账号格式为4-20位英文和数字");
            return false;
        }
        $.post("/Login/PutChangePassword?accountNumber=" + userName+"&password="+pwd,
            function(res) {
                if (res > 0) {
                    fourforms.style.display = "block";
                    threeforms.style.display = "none";
                    soutside3as.classList.remove("outside3a");
                } else {
                    layer.msg("修改失败,出现未知错误,请联系管理员!");
                }
            });

    }
    </script>
</body>
</html>